/**
 * Descriptions：
 * <p>
 * Author：ChenME
 * Date：2017/6/26
 * Email：ibelieve1210@163.com
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Platform,
    Image,
    ScrollView,
    Alert,
} from 'react-native';

import {StackNavigator,} from 'react-navigation';

import HomeTopView from './CMEHomeTopView';
import HomeMidView from './CMEHomeMidView';
import HomeBottomView from './CMEHomeBottomView';
import HomeShopCenterView from './CMEHomeShopCenterView';
import GuessYourLikeView from './CMEGuessYourLikeView';

import CMEHomeDetail from './CMEHomeDetail';

class CMEMain extends Component {

    static navigationOptions = {
        header: ()=> {
            return (
                <View style={styles.navBar}>
                    <View style={styles.navBarContent}>

                        {/*左边*/}
                        <TouchableOpacity>
                            <Text style={styles.navBarText}>北京</Text>
                        </TouchableOpacity>

                        {/*中间*/}
                        <TextInput
                            placeholder="输入商家、品类、商圈"
                            style={styles.navBarInput}
                        />

                        {/*右边*/}
                        <TouchableOpacity>
                            <Image
                                source={{uri: 'icon_homepage_message'}}
                                style={styles.navBarRightImage}
                            />
                        </TouchableOpacity>

                        <TouchableOpacity>
                            <Image
                                source={{uri: 'icon_homepage_scan'}}
                                style={styles.navBarRightImage}
                            />
                        </TouchableOpacity>
                    </View>
                </View>
            );
        },
    };

    /**
     <TouchableOpacity
     onPress={()=> {
                        this.props.navigation.navigate('HomeDetail');
                    }}>
     <Text>主页面</Text>
     </TouchableOpacity>
     */
    render() {
        return (
            <View style={styles.pageStyle}>
                <ScrollView style={styles.scrollView}>
                    {/*顶部*/}
                    <HomeTopView/>

                    <HomeMidView />

                    <HomeBottomView popTopHome={(data)=> {
                        this.pushToDetail(data);
                    }}/>

                    <HomeShopCenterView
                        pop2Home={(url)=> {
                            this.pushToDetail(url);
                        }}
                    />

                    <GuessYourLikeView/>
                </ScrollView>
            </View>
        );
    }

    /**
     * 跳转到首页的详情页面
     * @param data
     */
    pushToDetail(data) {
        this.props.navigation.navigate('HomeDetail', {data: data});
        // this.props.navigation.navigate('HomeDetail', {title: data.title, detailUrl: data.detailUrl});
        // Alert.alert(data);
    }
}

const HomePage = StackNavigator({
    CMEMain: {
        screen: CMEMain,
    },
    HomeDetail: {
        screen: CMEHomeDetail,
    }
}, {
    headerMode: 'screen'
});

const styles = StyleSheet.create({

    navBar: {//导航条整体样式
        height: Platform.OS === 'ios' ? 71 : 49,
        // backgroundColor: '#fff',
        backgroundColor: '#ff639b',
        elevation: 5,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
    },

    navBarContent: {//导航条内容样式
        height: 49,
        flexDirection: 'row',
        marginTop: Platform.OS === 'ios' ? 22 : 0,
        alignItems: 'center',
    },

    navBarText: {
        marginHorizontal: 10,
        fontSize: 14,
        color: '#fff',
    },

    navBarInput: {//导航条输入框样式
        flex: 1,
        height: 35,
        borderColor: 'gray',
        borderWidth: 1,
        marginRight: 10,
        borderRadius: 17.5,
        paddingHorizontal: 10,
        paddingVertical: 0,
        marginTop: Platform.OS == 'ios' ? 4 : 0,
        alignSelf: 'center',
        backgroundColor: '#fff',
    },

    navBarRightImage: {//导航条图片样式
        marginRight: 10,
        width: 25,
        height: 25,
    },

    pageStyle: {
        backgroundColor: '#e8e8e8',
    },

    pageStyle: {
        flex: 1,
    },
});

export {HomePage};